<template>
    <div>
        <el-card>
            <el-row type="flex" :gutter="20">
                <el-col :span="8">
                    <el-input placeholder="请输入需要搜索的商品名称" v-model="queryInfo.query" clearable @clear="getGoodsList">
                        <el-button slot="append" icon="el-icon-search" @click="getGoodsList()"></el-button>
                    </el-input>
                </el-col>
                <el-col :span="2.5">
                    <el-button type="primary" class="addGoodsBtn" icon="el-icon-plus" @click="addGoodsPage()">添加商品</el-button>
                </el-col>
            </el-row>
            <el-table
            :data="goods"
            border
            stripe
            style="width: 100%">
                <el-table-column type="index" label="#"></el-table-column>
                <el-table-column prop="goods_name" label="商品名称" min-width="18rem"></el-table-column>
                <el-table-column prop="goods_price" label="商品价格(元)" min-width="2rem"></el-table-column>
                <el-table-column prop="goods_weight" label="商品重量" min-width="2rem"></el-table-column>
                <el-table-column prop="add_time" label="创建时间" min-width="4rem">
                    <template slot-scope="scope">
                        {{scope.row.add_time | dataFormat}}
                    </template>
                </el-table-column>
                <el-table-column label="操作" min-width="4rem">
                    <template slot-scope="scope">
                        <el-button type="primary" icon="el-icon-edit" size="small" @click="editGood(scope.row)"></el-button>
                        <el-button type="danger" icon="el-icon-delete" size="small" @click="deleteGood(scope.row)"></el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination 
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            small 
            layout="total, sizes, prev, pager, next" 
            :total="total"
            :current-page="queryInfo.pagenum"
            :page-sizes="[5, 10, 20, 100]"
            :page-size="10"></el-pagination>
        </el-card>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                goods               : [],
                // searchGoodsID: '',

                // 获取商品列表参数
                queryInfo: {
                    query           : '',
                    pagenum         : 1,
                    pagesize        : 10
                },
                total               : 0,

                addGoodsDialogVisible: false,
                addGoods: {
                    goods_name      : '',
                    goods_cat       : '',
                    goods_price     : 0,
                    goods_number    : 0,
                    goods_weight    : 0,
                    goods_introduce : '',
                    pics            : [],
                    attrs           : []
                },
                addGoodsRules: {
                    name            : [{ required: true, message: '商品名称必填', trigger: 'blur' }],
                    class           : [{ required: true, message: '请选择商品归属分类', trigger: 'blur' }],
                    price           : [{ required: true, message: '请输入商品价格', trigger: 'blur' }],
                    number          : [{ required: true, message: '请输入商品数量', trigger: 'blur' }],
                    weight          : [{ required: true, message: '请输入商品重量', trigger: 'blur' }]
                }
            }
        },

        created() {
            this.getGoodsList()
        },

        methods: {
            // 获取商品列表
            async getGoodsList() {
                await this.$http.get('goods', {
                    params: this.queryInfo
                }).then(res => {
                    this.goods = res.data.data.goods
                    this.total = res.data.data.total
                }).catch(() => {
                    this.$message.error('Failed get goods list')
                })
            },

            // 分页
            handleSizeChange(newSize) {
                this.queryInfo.pagesize = newSize
                this.getGoodsList()
            },
            handleCurrentChange(newPage) {
                this.queryInfo.pagenum = newPage
                this.getGoodsList()
            },

            // 根据id搜索商品
            // async findGoodsID() {
            //     const { data: res } = await this.$http.get(`goods/${this.searchGoodsID}`)
            //     if (res.meta.status === 200) {
            //         this.goods = []
            //         this.goods.push(res.data)
            //     } else {
            //         this.$message.error('查询商品信息失败')
            //     }
            // },
            // 添加商品
            addGoodsPage() {
                this.$router.push('/goods/add')
                // this.addGoodsDialogVisible = true
            },
            addGoodsDialogClose() {
                this.$refs.addGoodsRef.resetFields()
                this.addGoodsDialogVisible = false
            },
            editGood(row) {
                this.$router.push({ name: 'edit', params: { row } })
            },
            deleteGood(row) {
                this.$confirm(`是否删除 ${row.goods_name} ？`, '删除商品', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'danger'
                }).then(async () => {
                    const { data: res } = await this.$http.delete(`goods/${row.goods_id}`)
                    console.log(res)
                    if (res.meta.status === 200) {
                        this.$message.success(`已删除 ${row.goods_name}`)
                        this.getGoodsList()
                    } else {
                        this.$message.error(`删除 ${row.goods_name} 失败`)
                    }
                }).catch(() => {
                    this.$message.info(`取消删除 ${row.goods_name}`)
                })
            }
        }
    }
</script>

<style lang="less" scoped>
    .el-table{
        margin-top: 1rem;
        margin-bottom: 1rem;
    }
    .addform{
        padding-right: 4rem;
    }
    .el-select{
        width: 100%;
    }
</style>